<template>
  <div class="app-container">
      <!-- 条件查询 -->
           <div>
              <el-form ref="form" :inline="true" :model="userWhere" label-width="80px" class="demo-form-inline">
                     <el-form-item label="姓名" size="mini">
                       <el-input v-model="userWhere.name"></el-input>
                     </el-form-item>
                     <el-form-item label="电话" size="mini">
                       <el-input v-model="userWhere.tel"></el-input>
                     </el-form-item>
                     <el-form-item>
                     <el-button type="primary" icon="el-icon-search" size="mini"  @click="selectWhere">查询</el-button>
                       <el-button type="warning" size="mini">取消</el-button>
                     </el-form-item>
                   </el-form>
           </div>
           <!-- 添加按钮 -->
           <div>
              <el-button type="success" @click="add" size="small"> 添加</el-button>
           </div>
     <!-- 列表渲染 -->
      <div>
             <el-table :data="tableData" style="width: 100%">
               <el-table-column type='index' label="序号"  width="80">
               </el-table-column>
                  <el-table-column  prop="name" label="姓名">
                  </el-table-column>
                  <el-table-column prop="tel" label="电话">
                  </el-table-column>
                  <el-table-column prop="address" label="地址">
                  </el-table-column>
                  <el-table-column  prop="desc" label="备注">
                  </el-table-column>
                   <el-table-column  label="操作">
                     <teleport slot-scope='scope'>
                        <el-button type="primary" icon="el-icon-edit" @click="update(scope.row)" size="small">修改</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
                     </teleport>

                   </el-table-column>
                </el-table>
          </div>
     <!-- 分页插件 -->
          <el-pagination
                     :current-page="pageIndex"
                     :page-size="pageSize"
                     :total="total"
                     style="padding: 30px 0; text-align: center;"
                     layout="total, prev, pager, next, jumper"
                     @current-change="listPage"
                   />
     <!-- 添加窗体 -->
     <el-dialog title="添加地址窗体"  :visible.sync="addressVisible" width="65%">
        <el-form ref="form" :model="addAddress" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="addAddress.name" ></el-input>
          </el-form-item>
          <el-form-item label="电话" size="mini">
            <el-input type="Number" v-model="addAddress.tel"></el-input>
          </el-form-item>
          <el-form-item label="地址" size="mini">
            <el-input type="Number" v-model="addAddress.address"></el-input>
          </el-form-item>
          </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addressVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendAddressAdd">确 定</el-button>
      </span>
    </el-dialog>
     <!-- 修改窗体 -->
     <el-dialog title="添加地址窗体"  :visible.sync="addressVisible" width="65%">
        <el-form ref="form" :model="addAddress" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="addAddress.name" ></el-input>
          </el-form-item>
          <el-form-item label="电话" size="mini">
            <el-input type="Number" v-model="addAddress.tel"></el-input>
          </el-form-item>
          <el-form-item label="地址" size="mini">
            <el-input type="Number" v-model="addAddress.address"></el-input>
          </el-form-item>
          </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addressVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendAddressAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name: 'index',
    data(){
      return {
        addressVisible:false,//是否显示
        addAddress:{
          id:0,
          name:'',
          tel:'',
          address:'',
          desc:''
        },
        pageIndex: 1, //当前第几页
        pageSize: 10, //每页显示10条记录
        total: 12, //总记录
        //条件查询
        userWhere:{
          name: '',
          tel: ''
        },
        //表格数据
        tableData:[
          {
            id: 1,
            name: '张三三',
            tel: '18812345678',
            address: '河南省新乡市XX区河南师范大学5号宿舍楼',
            desc:''
          },
          {
            id: 2,
            name: '李丽',
            tel: '18812344321',
            address: '河南省新乡市XX区河南师范大学5号宿舍楼',
             desc:''
          },
          {
            id: 3,
            name: '王五',
            tel: '13612345678',
            address: '河南省新乡市XX区河南师范大学5号宿舍楼',
             desc:''
          },
          {
            id: 3,
            name: '王五',
            tel: '13612345678',
            address: '河南省郑州市XX路阳光小区15号楼三单元201室',
             desc:''
          }
        ]
      }
    },
    methods: {
      //分页查询方法
      listPage(){},
      //条件查询
      selectWhere(){},
      //修改方法
      update(data){
          this.addAddress.id = data.id
          this.addAddress.name = data.name
          this.addAddress.tel = data.tel
          this.addAddress.desc = data.desc
          this.addAddress.address = data.address
          this.addressVisible = true
        },
        //删除方法
        del(id){
          this.tableData = this.tableData.filter((item) => item.id!== id)
        },
        //提交添加数据
        sendAddressAdd(){
          this.tableData.push(this.addAddress)
          this.addressVisible = false
        },
        //条件查询
        selectWhere(){

        },
        //添加按钮
        add(){
          this.addAddress = {}
          this.addressVisible = true
        },
    }
  }
</script>

<style>
</style>
